<!--
 * @Author: HaiF
 * @Date: 2020-12-02 11:22:18
 * @LastEditTime: 2020-12-20 16:41:39
 * @LastEditors: your name
 * @Description: 角色选择
 * @FilePath: \adminPC\src\views\user\widget\roleTree.vue
 * @可以输入预定的版权声明、个性签名、空行等
-->

<template>
  <div>
    <!-- {{resultData}} -->
    <el-tree
      ref="tree"
      :data="resultData"
      :props="defaultProps"
      check-strictly
      show-checkbox
      node-key="id"
      @check="handleCheckChange"
    />
  </div>
</template>

<script>
import { getUserRole } from '@/api/menber'
import { getList } from '@/api/role'

export default {
  components: {},
  props: {
    userId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      dataList: [],
      roleList: [],
      defaultProps: {
        // children: 'children',
        label: 'name'
      }
    }
  },
  computed: {
    resultData() {
      const result = this.dataList
      return result
    }
  },
  watch: {
    roleList(newVal) {
      if (newVal) {
        this.$refs.tree.setCheckedKeys(newVal)
      }
    }
  },
  created() {
    this.getList()
    // this.getUserRole()
  },
  mounted() {},
  methods: {
    handleCheckChange(obj, node) {
      const target = this.$refs['tree'].getCheckedKeys()
      this.$emit('treeClick', { target, node })
    },
    getUserRole() {
      getUserRole(this.userId).then(res => {
        const { data, code } = res
        if (code === 200) {
          this.roleList = data
        }
      })
    },
    getList() {
      getList().then(res => {
        const { data, code } = res
        if (code === 200) {
          this.dataList = data
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.wrapper{
   padding: 0px;
   margin: 0px;
}
</style>
